<script>
import { defineComponent, getCurrentInstance, ref } from 'vue'

export default defineComponent({
    setup() {
        const {proxy}=getCurrentInstance()
        const today=ref(0)
        const extended=ref(0)
        const completed=ref(0)
        const listArrayData=ref([])
        const listTask=()=>{
            proxy.$http.get(`system/task/list`)
            .then(res=>{
                console.log(res.data)
                listArrayData.value=res.data
                
            })
        }
        listTask()
        return{
            today,
            extended,
            completed,
            listArrayData,
            listTask
        }
    },
})

</script>

<template>
    <div class="dashboard-wrapper">
        <ul class="dashboard-block">
            <li class="hvr-grow-rotate">
                <div class="block-title">全部任务</div>
                <div class="block-data">
                    <div class="block-num">{{ listArrayData.length }}</div>
                    <i class="iconfont icon-quanburenwu taskfont"></i>
                </div>
            </li>
            <li class="hvr-grow-rotate">
                <div class="block-title">今日到期</div>
                <div class="block-data">
                    <div class="block-num">{{ today }}</div>
                    <i class="iconfont icon-jijiangdaoqi taskfont"></i>
                </div>
            </li>
            <li class="hvr-grow-rotate">
                <div class="block-title">超期任务</div>
                <div class="block-data">
                    <div class="block-num">{{ extended }}</div>
                    <i class="iconfont icon-yichaoqi taskfont"></i>
                </div>
            </li>
            <li class="hvr-grow-rotate">
                <div class="block-title">待完成任务</div>
                <div class="block-data">
                    <div class="block-num">{{ completed }}</div>
                    <i class="iconfont icon-daiwancheng taskfont"></i>
                </div>
            </li>
        </ul>
    </div>
</template>

<style scoped lang="scss">
@media (max-width: 768px){
    .dashboard-block {
        display: block;
        margin-top: 10px;
    }
    .dashboard-block>li {
        margin: 0 0 10px;
        padding: 8px 12px;
    }
}
.dashboard-wrapper {
    align-items: center;
    display: flex;
    flex-direction: column;
    width: 100%;
    
}

.dashboard-wrapper .dashboard-block {
    width: 100%;
    display: flex;
    flex-wrap:wrap;
    margin-top: 18px;
    
}

.dashboard-wrapper .dashboard-block>li {
    background-color: #fa8e8c;
    border-radius: 8px;
    width: 100%;
    cursor: pointer;
    display: flex;
    flex: 1;
    flex-direction: column;
    flex-shrink: 0;
    justify-content: center;
    list-style: none;
    padding: 16px 24px;
    transition: transform .3s ease-out 0s,box-shadow .3s ease-out 0s;
}
.dashboard-wrapper .dashboard-block>li:nth-child(1){
    background-color: #ffea00;
    margin-right: 50px;
}
.dashboard-wrapper .dashboard-block>li:nth-child(2){
    background-color: #28ed7d;
    margin-right: 50px;
}
.dashboard-wrapper .dashboard-block>li:nth-child(3){
    background-color: #c72d2d;
    margin-right: 50px;
}
.dashboard-wrapper .dashboard-block>li:nth-child(4){
    background-color: #0cb2ff;
    margin-right: 20px;
}

.dashboard-wrapper .dashboard-block {
    > li {
        .block-title {
            color: #000;
            font-size: 12px;
        }
        .block-data {
            align-items: center;
            display: flex;
            line-height: 1;
            padding-top: 10px;
            .block-num {
                color: #000;
                flex: 1;
                font-size: 32px;
                font-weight: 600;
                
            }
            .taskfont {
                color: #000;
                font-size: 20px;
            }
        }
    }
}
</style>
